<template>
  <div class="videoMain">
    <video style="display: none" controls muted autoplay ref="videoPlayer" @loadedmetadata="setStartTime"
      @click="openState = false" class="mt-[30px] s2k:mt-[40px] s4k:mt-[60px]">
      <source :src="videoSrc" type="video/mp4">
      Your browser does not support the video tag.
    </video>
    <!-- calc(100vh_-_194px_-_127px) -->
    <div class="p-[10px_50px_10px_50px_!important] mt-[20px] s2k:mt-[30px] s4k:mt-[35px] s2k:p-[0_50px_!important] s4k:p-[5px_50px_!important]">
      <div v-for="grid in gridData" :key="grid.parent">
        <GridMain :containerHeight="containerHeight" :parent="grid.parent" :gridNum="grid.gridNum"
          :addWidth="grid.addWidth" :addHeight="grid.addHeight" :closeSize="grid.closeSize"
          :camera_m_w="grid.camera_m_w" :camera_m_h="grid.camera_m_h" :wabeiSize="grid.wbeiSize"
          :fullSize="grid.fullSize" :IDsize="grid.IDsize" :Losize="grid.Losize" :recw="grid.recw" :rech="grid.rech"
          :boxSize="grid.boxSize" v-if="numIndex == grid.parent"></GridMain>
      </div>
    </div>
    <div class="videoFooter"> 
      <div class="videoDesc">1 hours ago, Monday, 15 : 31 : 36 2024-05-27</div>
      <div class="control">
        <div class="schedule mx-[30px] s2k:mx-[40px] s4k:mx-[60px]" @click="openState = false">
          <div class="item" @click="preVideo">
            <svg-icon name="kuaitui" width="15px" height="15px"
              class="svgVideo cursor-pointer s4ksvg s2ksvg"></svg-icon>
          </div>
          <div class="item" @click="fastBackward">
            <svg-icon name="pre" width="20px" height="20px" class="svgVideo cursor-pointer s4ksvg s2ksvg"></svg-icon>
          </div>
          <div v-if="isPlay" class="item " @click="bofang">
            <svg-icon name="bofang2" width="20px" height="20px" class="svgVideo cursor-pointer s4ksvg s2ksvg"></svg-icon>
          </div>
          <div v-else class="item " @click="zanting">
            <svg-icon name="pause" width="20px" height="20px"
              class="svgVideoActive cursor-pointer s4ksvg s2ksvg"></svg-icon>
          </div>
          <div class="item" @click="fastForward">
            <svg-icon name="next" width="20px" height="20px" class="svgVideo cursor-pointer s4ksvg s2ksvg"></svg-icon>
          </div>
          <div class="item" @click="nextVideo">
            <svg-icon name="kuaijin" width="20px" height="20px"
              class="svgVideo cursor-pointer s4ksvg s2ksvg"></svg-icon>
          </div>
        </div>
        <div class="multiple mx-[30px] s2k:mx-[40px] s4k:mx-[60px]" @click="openState = false">
          <div @click="multipleFun(1, 1)" class="item" :style="multipleIndex === 1 ? 'color: #3F83F8' : ''">
            <span>x1</span>
          </div>
          <div @click="multipleFun(2, 3)" class="item" :style="multipleIndex === 2 ? 'color: #3F83F8' : ''">
            <span>x3</span>
          </div>
          <div @click="multipleFun(3, 5)" class="item" :style="multipleIndex === 3 ? 'color: #3F83F8' : ''">
            <span>x5</span>
          </div>
        </div>
        <div class="num mx-[30px] s2k:mx-[40px] s4k:mx-[60px]" @click="openState = false">
          <div @click="numFun(1)" class="item" :style="numIndex == 1 ? 'color: #3F83F8' : ''">
            <span>1</span>
          </div>
          <div @click="numFun(2)" class="item" :style="numIndex == 2 ? 'color: #3F83F8' : ''">
            <span>2</span>
          </div>
          <div @click="numFun(10)" class="item" :style="numIndex == 10 ? 'color: #3F83F8' : ''">
            <span>3</span>
          </div>
        </div>
        <div class="w-[21vw] flex flex-row justify-between items-center h-[37px] s4k:h-[74px] mr-[56px] s2k:mr-[74.6px] s4k:mr-[112px]">
          <fwb-input
            v-model="searchCamera"
            placeholder="Search for a Recording"
            id="searchCamera"
            style="width: 100%"
          >
            <template #prefix>
              <svg
                aria-hidden="true"
                class="w-5 h-5 text-gray-500 dark:text-gray-400 s4k:w-7 s4k:h-7"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                />
              </svg>
            </template>
          </fwb-input>
          <button
            class="w-[90px] h-[38px] bg-[rgba(0,0,0,0)] text-[var(--theme-font-desc-color)] border-solid border-[var(--grid)] border-[1px] cursor-pointer text-[1.13rem]
              s4k:w-[180px] s4k:h-[76px] s2k:w-[120px] s2k:h-[50.6px] s2k:rounded-r-[8px] border-l-0 rounded-r-[8px]">
            Search
          </button>
        </div>
        <div class="other" @click="openState = false">
          <div
            class="item  rounded-[4px_0_0_4px] ml-[5px] s2k:rounded-[5.3px_0_0_5.3px] s2k:ml-[6.67px] s4k:rounded-[8px_0_0_8px] s4k:ml-[10px]"
            @click="updateScreen">
            <svg-icon name="full2" width="20px" height="20px" class="svgVideo cursor-pointer s4ksvg s2ksvg"></svg-icon>
          </div>
          <div class="item" @click="videoEnd">
            <svg-icon name="next" width="20px" height="20px" class="svgVideo cursor-pointer s4ksvg s2ksvg"></svg-icon>
          </div>
          <div class="item">
            <svg-icon name="global" width="20px" height="20px" class="svgVideo cursor-pointer s4ksvg s2ksvg"></svg-icon>
          </div>
          <div class="item" @click="downloadVideo(videoSrc, `${Date.now()}.mp4`)">
            <svg-icon name="download2" width="20px" height="20px"
              class="svgVideo cursor-pointer s4ksvg s2ksvg"></svg-icon>
          </div>
          <div class="item" @click="toggleReveal">
            <svg-icon v-if="timelineShow" name="show" width="20px" height="20px"
              class="svgVideo cursor-pointer s4ksvg s2ksvg"></svg-icon>
            <svg-icon v-else name="hide" width="20px" height="20px"
              class="svgVideo cursor-pointer s4ksvg s2ksvg"></svg-icon>
          </div>
          <div class="item" @click="updateRefresh">
            <svg-icon name="refresh" width="20px" height="20px"
              class="svgVideo cursor-pointer s4ksvg s2ksvg"></svg-icon>
          </div>
        </div>

        <div class="date">
          <div @click="dateFun" class="item  rounded-[4px] s2k:rounded-[5.3px] s4k:rounded-[8px]">
            <svg-icon name="date" width="20px" height="20px" class="svgVideo cursor-pointer s4ksvg s2ksvg"></svg-icon>
          </div>
        </div>
        <div class="picker">
          <a-range-picker v-model:value="prickTime" :format="dateFormat" :open="openState" @change="panelChange"
            placement="topRight">
            <template #renderExtraFooter>
              <div class="container w-full h-[40px] flex p-[5px_0_0_0]">
                <a-space direction="horizontal" style="margin: auto;position: relative">
                  <svg-icon name="time" width="20px" height="20px"
                    class="svgDate s4ktimesvg absolute left-[10px] top-[50%] s4k:top-[23%] transform -translate-y-1/2 z-[100]"></svg-icon>
                  <svg-icon name="time" width="20px" height="20px"
                    class="svgDate s4ktimesvg absolute right-[118px] top-[50%] s4k:top-[23%] transform -translate-y-1/2 z-[100]"></svg-icon>
                  <a-time-picker v-model:value="picker.startTime" placement="topLeft" class="mr-[150px]" />
                  <a-time-picker v-model:value="picker.endTime" placement="topLeft" value-format="HH:mm:ss" />
                </a-space>
              </div>
            </template>
          </a-range-picker>
        </div>
      </div>
      <div id='timeSlider' v-show="timelineShow"></div>
    </div>
  </div>
</template>

<script setup>
// https://github.com/6sy/timeSlider
import initTimeSlider from 'video-time-slider';
import { nextTick, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue';
import showIcon from "@/assets/video/show.svg"
import hideIcon from "@/assets/video/hide.svg"
import { FwbInput } from "flowbite-vue";
import settingStore from '@/store/modules/setting'
const store = settingStore()
const props = defineProps({
  videoList: {
    type: Array,
    default: [],
  },
})
const searchCamera = ref('')
const isPlay = ref(false)
const duration = ref(0) // 视频总时长
const videoPlayer = ref()
const instance = ref()
const presentSeconds = ref(0) // 当前秒数
const videoList = ref([])
const videoSrc = ref('')
const timeFrame = ref([]) // 视频时间区间
const rangeIndex = ref(null) // 当前第几个视频
const timer = ref()
const multipleTimer = ref() // 倍数定时器
const containerHeight = ref('')
onMounted(() => {
  const viewportWidth = window.innerWidth;
  // calc(100vh - 194px - 127px - 20px)
  if (2560 > viewportWidth) {
    containerHeight.value = 'calc(100vh - 194px - 127px - 5px)'
  } else if (3840 > viewportWidth && viewportWidth >= 2560) {
    containerHeight.value = 'calc(100vh - 240px - 150px - 30px)'
  } else if (3840 >= viewportWidth) {
    containerHeight.value = 'calc(100vh - 340px - 240px - 30px)'
  }
  let viewportHeight = window.innerHeight;
  if (viewportHeight < 1050) {
    document.querySelector('video').style.width = '900px'
    document.querySelector('#timeSlider').style.width = '900px'
    document.querySelector('#timeSlider').style.height = '50px'
    document.querySelector('.control').style.width = '900px'
  }


  videoList.value = props.videoList
  videoSrc.value = props.videoList[0].src
  videoList.value.forEach((item) => {
    let startTime = parseInt(item.startTime.slice(0, 2)) * 60 * 60
    let endTime = parseInt(item.endTime.slice(0, 2)) * 60 * 60
    timeFrame.value.push([startTime, endTime])
  })
  presentSeconds.value = parseInt(props.videoList[0].startTime.slice(0, 2)) * 60 * 60
})
nextTick(() => {
  let instanceList = props.videoList.map(p => `${p.startTime}-${p.endTime}-${p.eng}`) // 数据源
  videoPlayer.value.addEventListener('loadedmetadata', () => {
    duration.value = videoPlayer.value.duration;
    // 080000 起始时间
    // 020208 视频时长
    // console.log('presentSeconds',parseInt(props.videoList[0].startTime.slice(0, 2)))
    instance.value = initTimeSlider('#timeSlider', {
      curDaytimeChunkArray: instanceList,
      presentSeconds: presentSeconds.value,
      timeChunkType: {
        A: '#1C64F2',
        B: '#1C64F2',
      },
      speed: 1,
      isInitialPlay: true,
      onClick: clickVideo
    })
    videoSet()
    let container = document.querySelector('.ts-container')
    let tsline = document.querySelector('.ts-line-present')
    let assistline = document.querySelector('.ts-assist-line')
    assistline.style.borderLeft = "#1C64F2 solid 1px"
    let tstime = document.querySelectorAll('.ts-axis-time')

    let viewportWidth = window.innerWidth;
    if (viewportWidth >= 3840) {
      let tsContainer = document.querySelectorAll('.ts-axis')
      let timeChunk = document.querySelectorAll('.ts-timeChunk')
      tsContainer.forEach(item => {
        item.style.height = '60px'
      })
      timeChunk.forEach(item => {
        item.style.height = '60px'
      })
      tstime.forEach(item => {
        item.style.fontSize = '25px'
        item.style.marginTop = '-10px'
      })
      tsline.style.fontSize = '25px'
      container.style.marginTop = '25px'
    }
  });
  videoPlayer.value.addEventListener('playing', () => {
    instance.value.speed = 1
    isPlay.value = false
  });

  videoPlayer.value.addEventListener('pause', () => {
    instance.value.speed = 0
    isPlay.value = true
  });
})
// 视频初始设置
const videoSet = (params) => {
  let tsline = document.querySelector('.ts-line-present')
  if (params) {
    tsline.innerHTML = formatTimeString(params)
  } else {
    tsline.innerHTML = formatTimeString(props.videoList[0].startTime)
  }
  // 每秒钟更新时间
  timer.value = setInterval(() => {
    const [hours, minutes, seconds] = tsline.innerText.split(':').map(str => parseInt(str));
    const newSeconds = (seconds + 1) % 60;
    const newMinutes = (newSeconds === 0) ? ((minutes + 1) % 60) : minutes;
    const newHours = (newSeconds === 0 && newMinutes === 0) ? ((hours + 1) % 24) : hours;
    const formattedTime = `${newHours.toString().padStart(2, '0')}:${newMinutes.toString().padStart(2, '0')}:${newSeconds.toString().padStart(2, '0')}`;
    tsline.innerText = formattedTime;
  }, 1000);
}
// 视频播放
const bofang = () => {
  isPlay.value = false
  instance.value.speed = 1
  videoPlayer.value.play()
}
// 视频暂停
const zanting = () => {
  isPlay.value = true
  instance.value.speed = 0
  videoPlayer.value.pause()
}
const clickVideo = (one, two) => {
  clearInterval(timer.value)
  // console.log('two',two)
  rangeIndex.value = findRangeIndex(timeFrame.value, two);
  videoSrc.value = videoList.value[rangeIndex.value].src
  // 起始时间
  let start = parseInt(videoList.value[rangeIndex.value].startTime.slice(0, 2)) * 60 * 60
  // 结束时间
  let end = parseInt(videoList.value[rangeIndex.value].endTime.slice(0, 2)) * 60 * 60
  if (two < start) return false
  if (two > end) return false
  // 点击的秒数
  let clickSecond = two - start
  setStartTime(clickSecond);
}
const setStartTime = (second) => {
  if (isNaN(second)) return;
  videoPlayer.value.currentTime = second;
}

function formatTimeString(timeString) {
  const hours = timeString.substring(0, 1) * 10 + parseInt(timeString.substring(1, 2), 10);
  const minutes = timeString.substring(2, 4);
  const seconds = timeString.substring(4, 6);
  return `${hours.toString().padStart(2, '0')}:${minutes}:${seconds}`;
}
function findRangeIndex(rangesArray, number) {
  for (let i = 0; i < rangesArray.length; i++) {
    const [start, end] = rangesArray[i];
    if (number >= start && number <= end) {
      return i;  // 返回找到的数组的下标
    }
  }
  return -1;  // 如果没有找到匹配的范围，返回-1或其他标记值
}
onBeforeUnmount(() => {
  clearInterval(timer.value)
  clearInterval(multipleTimer.value)
})
// 控件相关
// picker
const picker = reactive({
  startTime: '',
  endTime: '',
})
// num
const numIndex = ref(10)
const numFun = (index) => {
  numIndex.value = index
}
const inputSea = ref('');
const prickTime = ref('');
const openState = ref(false) // 日期面板显示
const panelChange = (value) => {
  console.log('value', value)
  let bofore = timeHandle(value[0].$d)
  let after = timeHandle(value[1].$d)
  // console.log('bofore',bofore)
  // console.log('after',after)
  if (picker.startTime && picker.endTime) {
    openState.value = false
  }
}
watch(() => picker.endTime, (newVal, oldVal) => {
  if (!newVal) return false
  if (!prickTime.value) return false
  if (!picker.startTime) return false
  openState.value = false
});
const timeHandle = (value) => {
  let time = new Date(value)
  let d = new Date(time);
  let dateValue = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + ' ' + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds();
  console.log('dateValue', dateValue); // 2024-5-17 11:29:55
  let currentHour = d.getHours()
  let currentMinutes = d.getMinutes()
  let currentSeconds = d.getSeconds();
  let sumSeconds = currentHour * 3600 + currentMinutes * 60 + currentSeconds
  return sumSeconds
}
const dateFun = () => {
  openState.value = !openState.value
}
const pickerOk = (value) => {
  console.log('value', value)
  if (value[1]) {
    openState.value = false
  }
}
// 下载
const downloadVideo = (url, filename) => {
  let link = document.createElement('a');
  link.href = url;
  link.download = filename;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}
// 全屏
const updateScreen = () => {
  let video = document.querySelector('video')
  if (video.requestFullscreen) {
    video.requestFullscreen();
  } else if (video.mozRequestFullScreen) { // 兼容旧版Firefox
    video.mozRequestFullScreen();
  } else if (video.webkitRequestFullscreen) { // 兼容旧版Chrome和Safari
    video.webkitRequestFullscreen();
  } else if (video.msRequestFullscreen) { // 兼容旧版IE
    video.msRequestFullscreen();
  }
}
// 快进15s
const fastForward = () => {
  if (videoPlayer.value) {
    // console.log('videoPlayer.value',videoPlayer.value.currentTime)
    const currentTime = videoPlayer.value.currentTime;
    videoPlayer.value.currentTime = currentTime + 150;
    instance.value.presentSeconds += 150
    presentSeconds.value += 150
    // instance.value.setTimeLineLeft()
    // clearInterval(timer.value)
    // let start = parseInt(videoList.value[rangeIndex.value].startTime.slice(0, 2)) * 60 * 60
    // let clickSecond = presentSeconds.value - start
    // setStartTime(clickSecond);
  }
}
// 快退15s
const fastBackward = () => {
  if (videoPlayer.value) {
    let currentTime = videoPlayer.value.currentTime;
    if (currentTime - 150 >= 0) {
      videoPlayer.value.currentTime = currentTime - 150;
      instance.value.presentSeconds -= 150
      instance.value.setTimeLineLeft()
    } else {
      videoPlayer.value.currentTime = 0;
    }
  }
}
// 上个视频
const preVideo = () => {
  if (rangeIndex.value === 0) return false
  let pre = timeFrame.value[rangeIndex.value - 1]
  videoSrc.value = videoList.value[rangeIndex.value - 1].src
  clearInterval(timer.value)
  // 起始时间
  let start = parseInt(videoList.value[rangeIndex.value - 1].startTime.slice(0, 2)) * 60 * 60
  // 结束时间
  let end = parseInt(videoList.value[rangeIndex.value - 1].endTime.slice(0, 2)) * 60 * 60
  if (pre[0] < start) return false
  if (pre[0] > end) return false
  // 点击的秒数
  let clickSecond = pre[0] - start
  setStartTime(clickSecond);
  instance.value.presentSeconds = pre[0]
  instance.value.setTimeLineLeft()
  videoSet(videoList.value[rangeIndex.value - 1].startTime)
}
// 下个视频
const nextVideo = () => {
  if (rangeIndex.value === timeFrame.value.length - 1) return false
  let next = timeFrame.value[rangeIndex.value + 1]
  videoSrc.value = videoList.value[rangeIndex.value + 1].src
  clearInterval(timer.value)
  // 起始时间
  let start = parseInt(videoList.value[rangeIndex.value + 1].startTime.slice(0, 2)) * 60 * 60
  // 结束时间
  let end = parseInt(videoList.value[rangeIndex.value + 1].endTime.slice(0, 2)) * 60 * 60
  if (next[0] < start) return false
  if (next[0] > end) return false
  // 点击的秒数
  let clickSecond = next[0] - start
  setStartTime(clickSecond);
  instance.value.presentSeconds = next[0]
  instance.value.setTimeLineLeft()
  videoSet(videoList.value[rangeIndex.value + 1].startTime)
}
// 倍速播放
const multipleIndex = ref(1)
const multipleFun = (index, rate) => {
  multipleIndex.value = index
  if (videoPlayer.value) {
    clearInterval(multipleTimer.value)
    let currentTime = videoPlayer.value.currentTime;
    videoPlayer.value.playbackRate = rate;
    multipleTimer.value = setInterval(() => {
      // videoPlayer.value.currentTime = videoPlayer.value.currentTime + 1
      instance.value.presentSeconds += 0.3
      presentSeconds.value += 0.3
      // instance.value.presentSeconds += 1
      // presentSeconds.value += 1
    }, 1000 / rate)
  }
}
// 播放至视频结束
const videoEnd = () => {
  if (videoPlayer.value) {
    let video = timeFrame.value[rangeIndex.value]
    let start = parseInt(videoList.value[rangeIndex.value].startTime.slice(0, 2)) * 60 * 60
    let clickSecond = video[1] - start
    setStartTime(clickSecond);
    instance.value.presentSeconds = video[1]
    instance.value.setTimeLineLeft()
  }
}
// 时间轴显示隐藏
const timelineShow = ref(true)
const toggleReveal = () => {
  // timelineShow.value = !timelineShow.value
}
// 刷新
const updateRefresh = () => {
  store.refsh = !store.refsh
}

const gridData = ref([
  { parent: '1', gridNum: '1', addWidth: '60px', addHeight: '60px', closeSize: '20px', camera_m_w: '30px', camera_m_h: '30px', fullSize: '30px', wbeiSize: '30px', IDsize: '13px', Losize: '12px', recw: '42px', rech: '19px', boxSize: '30px', },
  { parent: '2', gridNum: '4', addWidth: '50px', addHeight: '50px', closeSize: '20px', camera_m_w: '25px', camera_m_h: '25px', fullSize: '25px', wbeiSize: '25px', IDsize: '12px', Losize: '12px', recw: '42px', rech: '19px', boxSize: '25px', },
  { parent: '10', gridNum: '6', addWidth: '40px', addHeight: '40px', closeSize: '14px', camera_m_w: '25px', camera_m_h: '25px', fullSize: '25px', wbeiSize: '25px', IDsize: '12px', Losize: '11px', recw: '25px', rech: '14px', boxSize: '25px', }
]);
</script>

<style scoped lang="scss">
#searchCamera {
  padding: 0;

  :deep(input) {
    padding-top: 0;
    padding-bottom: 0;
    height: 36px;
    background-color: rgba(0,0,0,0);
    border: solid var(--grid) 1px;
    font-size: 1.13rem;
    font-family: Medium;
    color: var(--theme-font-color);
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;

    &:focus {
      box-shadow: inset 0 0;
    }
  }
}
.videoMain {
  position: relative !important;
  width: 100%;
  height: calc(100vh - 80px);

  .videoFooter {
    width: 100%;
    position: absolute !important;
    bottom: 0;
    left: 0;

    .control {
      width: 100% !important;
      height: 40px;
      display: flex;
      flex-direction: row;
      justify-content: start;
      align-items: center;
      position: relative;
      padding-top: 15px;
      .schedule,
      .other,
      .download,
      .date {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        border-radius: 4px;

        .item {
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          height: 30px;
          margin: 0 32px 0 0;

          img {
            width: 15px;
            height: 15px;
            padding: 0 10px;
            cursor: pointer;
          }
        }
      }

      .multiple,
      .num {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        border-radius: 4px;
        margin-left: 5px;
        color: var(--theme-font-desc-color);

        .item {
          border-radius: 4px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          height: 30px;
          margin: 0 20px 0 0;


          span {
            padding: 0 10px;
            cursor: pointer;
            font-size: 1.67rem;
            font-weight: 400;
          }
        }
      }

      .num {
        .item {
          span {
            padding: 0 12px;
          }
        }
      }

      input {
        width: 200px;
        height: 31px;
        background-color: #374151;
        color: #ffffff;
        font-size: 15px;
        font-weight: 400;
        padding: 0px 10px;

        &::placeholder {
          color: #b8b4b4;
        }

        border:none;
        margin: 0 5px;

        &:focus {
          outline: none;
        }
      }

      .picker {
        position: absolute;
        bottom: 0px !important;
        right: 0;
        z-index: -1;
      }
    }

    .videoDesc {
      width: 100%;
      height: 24px;
      padding: 9px 0;
      background: #1C64F2;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: #fff;
      text-align: center;
      font-family: Inter;
      font-size: 1.3rem;
    }

    #timeSlider {
      width: 99% !important;
      height: 100px !important;
      margin: 0 auto;
      background: var(--cellBg);
      z-index: 1;
    }
  }
}
:deep(.ts-axis) {
  height: 50px !important;
  border: none;
  border-top: solid #4B5563 1px;
  background: var(--cellBg);
  &:nth-child(4n+1) {
    border-left: solid #4B5563 1px;
  }
}

.ts-axis:last-child {
  // border-left: solid #4B5563 1px;
}

.ts-container {
  margin-top: 20px;
}

:deep(.ts-axis-time) {
  top: -22px;
  font-size: 1.16rem;
  color: var(--theme-font-desc-color);
}
:deep(.ts-axis-last){
  border-right: solid #4B5563 1px;
}
:deep(.ts-axis-time-last) {
  top: -22px;
  font-size: 1.16rem;
  color: var(--theme-font-desc-color);
}

:deep(.ts-line) {
  border-left:solid #1C64F2 1px;
  margin-top: 20px;
}
:deep(.ts-line-present) {
  font-size: 1.16rem;
  top: 28px;
  color: var(--theme-font-color);
}

video {
  width: 1100px;
  height: auto;
}

video::-webkit-media-controls-enclosure {
  display: none;
}

.ant-picker {
  background-color: var(--theme-ant-picker);
  border: solid 1px var(--grid);
  color: #fff;

  :deep(input) {
    color: #fff;
  }

  :deep(svg) {
    color: #fff;
  }
}

:deep(.ant-picker-input) {
  padding-left: 25px;

  input::placeholder {
    color: rgba(0, 0, 0, 0);
  }

  .ant-picker-suffix {
    display: none;
  }

  .ant-picker-clear {
    display: none;
  }
}

@media screen and (min-width: 2560px) {
  .s2ksvg {
    transform: scale(1.5);
  }
  #searchCamera {
    :deep(input) {
      height: 48px;
      padding-left: 40px;
    }
  }
  .videoMain {
    height: calc(100vh - 106px);
    .videoFooter {
      .control {
        height: 60px;
        padding-top: 20px;
        .schedule,
        .other,
        .download,
        .date {
          font-family: Inter;
          font-weight: 700;
          border-radius: 5.3px;

          .item {

            height: 40px;
            margin: 0 45px 0 0;

            img {
              width: 20px;
              height: 20px;
              padding: 0 13.3px;
            }
          }
        }

        .multiple,
        .num {
          font-family: Inter;
          font-weight: 700;
          border-radius: 5.3px;
          margin-left: 6.67px;

          .item {
            border-radius: 5.3px;
            height: 40px;
            margin: 0 26.66px 0 0;

            span {
              padding: 0 13.3px;
            }
          }
        }

        .num {
          .item {
            span {
              padding: 0 16px;
            }
          }
        }

        .picker {
          bottom: 20px !important;
        }
      }

      .videoDesc {
        height: 32px;
        padding: 12px 0;
      }

      #timeSlider {
        height: 110px !important;
        margin-bottom: 25px;
      }
    }
  }
  :deep(.ts-timeChunk) {
    height: 30px;
  }
  
  :deep(.ts-axis-time, .ts-axis-time-last) {
    top: -32px;
  }
  :deep(.ts-axis) {
    height: 66.66px;
  }
  :deep(.ts-axis-time-last) {
    top: -32px;
  }
  :deep(.ts-line-present) {
    top: 40px;
  }
}

@media screen and (min-width: 3840px) {
  .s4ksvg {
    transform: scale(2);
    margin: 0 10px;
  }

  .s4ktimesvg {
    transform: scale(1);
  }
  #searchCamera {
    :deep(input) {
      height: 72px;
      padding-left: 80px;
    }
  }
  .videoMain {
    height: calc(100vh - 160px);
    .videoFooter {
      .control {
        height: 90px;
        padding-top: 30px;
        .schedule,
        .other,
        .download,
        .date {
          border-radius: 8px;

          .item {

            height: 60px;
            margin: 0 64px 0 0;

            img {
              width: 30px;
              height: 30px;
              padding: 0 20px;
            }
          }
        }

        .multiple,
        .num {
          border-radius: 8px;
          margin-left: 10px;

          .item {
            border-radius: 8px;
            height: 60px;
            margin: 0 40px 0 0;
            span {
              padding: 0 20px;
            }
          }
        }

        .num {
          .item {
            span {
              padding: 0 24px;
            }
          }
        }

        .picker {
          bottom: 50px !important;
        }
      }

      .videoDesc {
        height: 48px;
        padding: 18px 0;
      }

      #timeSlider {
        height: 150px !important;
        margin-bottom: 35px;
      }
    }
  }
  :deep(.ts-timeChunk) {
    height: 40px !important;
  }

  :deep(.ts-axis-time, .ts-axis-time-last) {
    top: -35px;
  }
  :deep(.ts-axis) {
    height: 100px !important;
  }
  :deep(.ts-line) {
    margin-top: 40px;
  }
  :deep(.ts-axis-time-last) {
    top: -50px;
  }
  :deep(.ts-line-present) {
    top: 60px;
  }
}
</style>
<style>
.ant-picker-cell-range-start::before {
  background: var(--theme-hover) !important;
}

.ant-picker-cell-range-end::before {
  background: var(--theme-hover) !important;
}

.ant-picker-cell-in-range::before {
  background: var(--theme-hover) !important;
}

.ant-picker-panel {
  border-bottom: solid var(--date) 1px !important;
}

:where(.css-dev-only-do-not-override-b92jn9)[class^="ant-picker"] [class^="ant-picker"],
:where(.css-dev-only-do-not-override-b92jn9)[class*=" ant-picker"] [class^="ant-picker"],
:where(.css-dev-only-do-not-override-b92jn9)[class^="ant-picker"] [class*=" ant-picker"],
:where(.css-dev-only-do-not-override-b92jn9)[class*=" ant-picker"] [class*=" ant-picker"] {
  box-shadow: none !important;
}
:where(.css-dev-only-do-not-override-b92jn9).ant-picker-dropdown .ant-picker-header>button {
  min-width: 1.4em;
  font-size: 22px;
}

:where(.css-dev-only-do-not-override-b92jn9).ant-picker-dropdown .ant-picker-header {
  padding: 0 19px 0 15px;
}
@media screen and (min-width: 2560px) {
  .ant-picker-dropdown {
    transform: scale(1.3);
    /* top: 870px !important; */
  }
}

@media screen and (min-width: 3840px) {
  .ant-picker-dropdown {
    transform: scale(2);
    /* top: 1380px !important; */
  }
}
</style>